<template name="index-picture">
    <view class="container">
        <view class="item" v-for="item in product" :key="item.id">
            <view class="nft-tag" v-if="item.type !== 'shop' && isShowTags=='1'"></view>
            <view class="ext-tag" v-if="item.ext && item.ext.grab"></view>
            <image mode="aspectFill" :src="item.thumImg? item.thumImg:item.mainImg" @click="navigateTo(item)"></image>
            <view class="sold" v-if="item.stock <= 0">
                <u-icon name="/static/icon_sold_out.png" size="140rpx"></u-icon>
            </view>
            <view class="mc-bottom">
                <u-text
                    size="30rpx"
                    color="#FFFFFF"
                    :lines="1"
                    block
                    :text="item.name"
                ></u-text>
                <u-text
                    :text="item.price + ''"
                    mode="price"
                    size="34rpx"
                    blod
                    color="#FFFFFF"
                    iconStyle="22rpx"
                ></u-text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "index-picture",
    props: {
        product: {
            type: Array,
            default: []
        }
    },
    computed: {
        isShowTags() {
            return this.$store.getters.isShowTags
        }
    },
    methods: {
        navigateTo(product) {
            uni.$u.route({
                url: product.type == 'nft' ? 'pages/nftDetail/index':'pages/productDetail/index',
                params: {
                    productId: product.id
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .container {
        padding: 0 15rpx;
        overflow-x: auto;
        white-space:nowrap;
        .item {
            position: relative;
            width: 460rpx;
            height: 642rpx;
            margin-right: 20rpx;
            border-radius: 5rpx;
            display: inline-block;
            &:last-child {
                margin-right: 0;
            }
            .sold {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -70rpx;
                margin-left: -70rpx;
            }
            image {
                width: 100%;
                height: 100%;
            }
            .mc-bottom {
                box-sizing: border-box;
                position: absolute;
                bottom: 14rpx;
                width: 100%;
                height: 110rpx;
                background: #282828;
                background-color: rgba($color: #282828, $alpha: 0.78);
                //opacity: 0.78;
                padding: 11rpx 20rpx;
                white-space: normal;
            }
            .nft-tag {
                position: absolute;
                width: 100rpx;
                height: 40rpx;
                top: 20rpx;
                left: 15rpx;
                background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
                background-size: 100% 100%;
                z-index: 1;
            }
            .ext-tag {
                position: absolute;
                right: 0;
                top: 0;
                background: url("https://img.ionepin.com/f782f1f67beb68f8304113044fce59417be2b993.png") no-repeat;
                background-size: 100% 100%;
                width: 143rpx;
                height: 138rpx;
                z-index: 1;
            }

        }
    }
</style>

